<template>
	<view>
		<view class="">
			<uni-nav-bar title="入住加盟"></uni-nav-bar>
			<uni-icons type="back" size="30" class="titleBack" @click="goBack"></uni-icons>
		</view>
		<!-- form表单 -->
		<view class="box">
			<view class="box-item" v-for="item,index in list" :key="index">
				<view class="left">
					{{item.name}}
				</view>
				<view class="right">
		
				</view>
				<view class="add" v-if="item.name == '加盟商标/图片'">
					<text class="add-text">
						+
					</text>
				</view>
			</view>
			<view class="img-box">
				<img src="" alt="">
				<img src="" alt="">
				<img src="" alt="">
			</view>
		</view>
		<!-- 底部发布按钮 -->
		<view >
			<button class="btn-box" @click="act = true">入驻</button>
			<button v-if="act" class="btn-box" @click="open">发布</button>
		</view>
		<!-- 发布成功弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<uni-card>
				<view class="card-box">
					<view class="card-box-icons" @click="onClick">
						x
					</view>
					<view class="card-box-title">
						发布成功
					</view>
					<view class="card-box-text">
						可在我的发布查看详情展示
					</view>
				</view>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '加盟标题'
					},
					{
						name: '加盟店名称'
					},
					{
						name: '加盟预估资金'
					},
					{
						name: '门店数量'
					},
					{
						name: '加盟店名称全称'
					},
					{
						name: '加盟区域'
					},
					{
						name: '行业类型'
					},
					{
						name: '加盟品牌介绍'
					},
					{
						name: '加盟优势'
					},
					{
						name: '加盟支持（店内设计/设备/推广/装修/培训等）'
					},
					{
						name: '加盟要求（人员/资金/股权）'
					},
					{
						name: '加盟费用（合作费/服务费/设计装修/培训费/保证金/设备）'
					},
					{
						name: '加盟商标/图片'
					}
				],
				act:false
			};
		}, 
		methods: {
			// 返回
			goBack() {
				uni.navigateBack(1)
			},
			// 发布成功弹窗
			 open(){
				 this.act = false
			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			        this.$refs.popup.open('center')
			},
			// 跳转首页
			onClick() {
				uni.switchTab({
					url:'/pages/home/index'
				})
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
.titleBack {
		position: absolute;
		top: 20rpx;
		font-size: 60rpx;
		color: #ccc;
	}
	.box {
		padding-left: 10rpx;
	}
	
	.box-item {
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;
		border-bottom: 1px solid #ccc;
	}
	
	.add {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		background-color: #ccc;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 10rpx;
	}
	
	.add-text {
		position: absolute;
		top: -24rpx;
		left: 16rpx;
	}
	
	.img-box {
		display: flex;
		justify-content: space-around;
	
	}
	
	img {
		width: 200rpx;
		height: 200rpx;
		padding-top: 30rpx;
		margin-bottom: 200rpx;
	}
	
	.btn-box {
		position: fixed;
		bottom: 0;
		border: 1rpx solid #ccc;
		width: 100%;
		/* border-radius: 10%; */
		border-radius: 30rpx;
	}
	.card-box {
		position: relative;
		width: 600rpx;
		text-align: center;
		padding-top: 40rpx;
	}
	.card-box-icons {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 50rpx;
	}
	.card-box-title {
		font-size: 36rpx;
		color: #000;
	}
	.card-box-text {
		font-size: 24rpx;
		color: #000;
		margin: 50rpx 0 100rpx 0;
	}
</style>
